<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- 引入JSTL -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>应急预警与响应系统 - 首页</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入JSTL库（需在WEB-INF/lib添加jstl.jar） -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            danger: '#EF4444',
            warning: '#F59E0B',
            success: '#10B981',
            dark: '#1E293B',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    /* ... existing styles ... */

    .custom-section {
      padding: 2rem; /* 增加内边距 */
      line-height: 1.6; /* 调整行间距 */
    }

    .custom-section h2 {
      margin-bottom: 1rem; /* 调整标题与内容的间距 */
    }

    .custom-section p {
      margin-bottom: 0.5rem; /* 调整段落间距 */
    }
  </style>

  <style type="text/tailwindcss">
    /* ... existing styles ... */

    @media (max-width: 640px) {
      .responsive-table tbody tr {
        display: block;
        margin-bottom: 1rem;
      }

      .responsive-table tbody tr td {
        display: block;
        text-align: right;
      }

      .responsive-table tbody tr td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
      }
    }
  </style>

  <style type="text/tailwindcss">
    .content-auto { content-visibility: auto; }
    .alert-pulse { animation: pulse 2s infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    .card-shadow { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
    .nav-shadow { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
  </style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 顶部导航栏 -->
<header class="bg-white fixed top-0 left-0 right-0 z-50 nav-shadow">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <i class="fa fa-exclamation-triangle text-danger text-2xl"></i>
      <h1 class="text-xl font-bold text-dark">应急预警与响应系统</h1>
    </div>
    <div class="flex items-center space-x-4">
      <!-- 登录按钮跳转到登录表单（实际项目可改为弹出登录框） -->
      <a href="index.jsp" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition">
        <i class="fa fa-user-circle mr-1"></i> 登录
      </a>
      <a href="reg.jsp" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition">
        <i class="fa fa-user-circle mr-1"></i> 注册
      </a>
    </div>
  </div>
</header>



<!-- 主内容区 -->
<main class="container mx-auto px-4 pt-24 pb-16">
  <!-- 紧急预警区域（模拟数据，实际从数据库读取最新预警） -->
  <section class="mb-8">
    <div class="bg-danger/10 border-l-4 border-danger p-4 rounded-r-md mb-6">
      <div class="flex justify-between items-start">
        <div class="bg-primary-100 p-6 rounded-lg mb-6 text-center">
          <h2 class="text-xl font-bold text-primary">不忘初心 牢记使命</h2>
          <p class="text-gray-700 mt-4">对党忠诚 纪律严明</p>
          <p class="text-gray-700 mt-2">赴汤蹈火 竭诚为民</p>
        </div>

      </div>
    </div>

    <!-- 预警发布按钮（仅登录后可见，此处为静态展示） -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
      <button class="bg-danger/10 hover:bg-danger/20 text-danger p-4 rounded-lg transition flex flex-col items-center">
        <i class="fa fa-fire text-3xl mb-2"></i>
        <span><a href="https://www.119.gov.cn/" class="text-danger">火灾科普</a></span>
      </button>
      <button class="bg-warning/10 hover:bg-warning/20 text-warning p-4 rounded-lg transition flex flex-col items-center">
        <i class="fa fa-bolt text-3xl mb-2"></i>
        <span><a href="https://www.119.gov.cn/kp/hzyf/index.shtml" class="text-danger">应急科普</a></span>
      </button>
      <button class="bg-primary/10 hover:bg-primary/20 text-primary p-4 rounded-lg transition flex flex-col items-center">
        <i class="fa fa-exclamation-circle text-3xl mb-2"></i>
        <span><a href="https://www.chinacdc.cn/jkkp/" class="text-danger">公共卫生</a></span>
      </button>
      <button class="bg-dark/10 hover:bg-dark/20 text-dark p-4 rounded-lg transition flex flex-col items-center">
        <i class="fa fa-plus-circle text-3xl mb-2"></i>
        <span><a href="https://www.mem.gov.cn/index.shtml" class="text-danger">应急官网</a></span>
      </button>
    </div>
  </section>

  <!-- 系统概览（静态数据，实际从数据库统计） -->
  <section class="mb-8">
    <h2 class="text-xl font-semibold mb-4 flex items-center">
      <i class="fa fa-info-circle text-primary mr-2"></i> 系统概览
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-white p-4 rounded-lg card-shadow">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm">高级预警</p>
            <h3 class="text-2xl font-bold mt-1">${warningCount}</h3>
            <p class="text-gray-500 text-sm mt-2">较昨日 <span class="text-danger">+1</span></p>
          </div>
          <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center">
            <i class="fa fa-bell text-danger"></i>
          </div>
        </div>
      </div>
      <div class="bg-white p-4 rounded-lg card-shadow">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm">中级预警</p>
            <h3 class="text-2xl font-bold mt-1">${respondingCount}</h3>
            <p class="text-gray-500 text-sm mt-2">较昨日 <span class="text-danger">+2</span></p>
          </div>
          <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center">
            <i class="fa fa-exclamation-triangle text-warning"></i>
          </div>
        </div>
      </div>
      <div class="bg-white p-4 rounded-lg card-shadow">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm">低级预警</p>
            <h3 class="text-2xl font-bold mt-1">${resolvedCount}</h3>
            <p class="text-gray-500 text-sm mt-2">较昨日 <span class="text-success">+4</span></p>
          </div>
          <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center">
            <i class="fa fa-check-circle text-success"></i>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 最新事件（动态从数据库加载） -->
  <section>
    <h2 class="text-xl font-semibold mb-4 flex items-center">
      <i class="fa fa-history text-primary mr-2"></i> 最新事件
    </h2>
    <div class="bg-white rounded-xl p-6 card-shadow">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50"> <!-- 添加表头背景色 -->
          <tr>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-700 uppercase tracking-wider">事件类型</th>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-700 uppercase tracking-wider">发生地点</th>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-700 uppercase tracking-wider">预警等级</th>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-700 uppercase tracking-wider">时间</th>
          </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
          <tr>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${type}</td> <!-- 增加内边距和行高 -->
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${location}</td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${status}</td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">${publishTime}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

</main>

<!-- 底部导航 -->
<footer class="bg-white fixed bottom-0 left-0 right-0 border-t border-gray-200">
  <div class="container mx-auto">
    <div class="flex justify-around py-3">
      <a href="#" class="flex flex-col items-center text-primary">
        <i class="fa fa-home text-xl"></i>
        <span class="text-xs mt-1">首页</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-500 hover:text-primary transition">
        <i class="fa fa-bell text-xl"></i>
        <span class="text-xs mt-1">科普</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-500 hover:text-primary transition">
        <i class="fa fa-map-marker text-xl"></i>
        <span class="text-xs mt-1">事件</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-500 hover:text-primary transition">
        <i class="fa fa-user text-xl"></i>
        <span class="text-xs mt-1">我的</span>
      </a>
    </div>
  </div>
</footer>

<!-- JavaScript -->
<script>
  // 注册模态框控制
  document.getElementById('registerBtn').addEventListener('click', function() {
    document.getElementById('registerModal').classList.remove('hidden');
  });

  document.getElementById('closeRegister').addEventListener('click', function() {
    document.getElementById('registerModal').classList.add('hidden');
  });

  // 点击模态框外部关闭
  document.getElementById('registerModal').addEventListener('click', function(e) {
    if (e.target === this) {
      this.classList.add('hidden');
    }
  });
</script>
</body>
</html>